<template>
  <u-popup
    v-model="showPop"
    :mask-close-able="false"
    :closeable="true"
    @close="clickClose"
    mode="center"
    width="96%"
    height="600rpx"
  >
    <view class="popup">
      <text class="title">AI面评</text>
      <view class="inputVuew">
        <view class="recommendTextBlock">
          <view class="textTip">您可能对以下职业感兴趣：</view>
          <view v-if="data.length >= 3" class="btnTip" @click.stop="handleOther"
            >换一批</view
          >
        </view>
        <view class="recommendBlock">
          <view
            class="recommendItem"
            v-for="(item, index) in data"
            :key="index"
            @click.stop="selectedItemAction(item)"
          >
            <view
              :class="[
                'recommendImgArea',
                { viewshadow: selectedItem.positionId == item.positionId }
              ]"
            >
              <img class="recommendImg" :src="item.pic" alt="" />
            </view>
            <view class="recommendText">{{ item.positionName }}</view>
          </view>
        </view>
      </view>
      <u-button class="popupBtn" type="primary" @click.stop="handleNext"
        >立即体验</u-button
      >
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: []
    },
    prizeCode: {
      type: String,
      default: 'assistence_recharge_card'
    }
  },
  watch: {
    show(newValue, oldValue) {
      this.showPop = newValue;
    },

    data(newValue, oldValue) {
      if (newValue.length > 0) {
        this.selectedItem = newValue[0];
      }
    }
  },
  data() {
    return {
      inputText: '',
      selectedItem: {},
      showPop: false
    };
  },

  methods: {
    selectedItemAction(item) {
      this.selectedItem = item;
    },

    handleNext() {
      this.$emit('didClick', this.selectedItem);
    },

    handleOther() {
      this.$emit('changeClick');
    },
    clickClose() {
      this.showPop = false;
      this.$emit('close');
    }
  }
};
</script>

<style lang="scss" scoped>
.popup {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  height: 100%;
  .title {
    font-size: 40rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #454b5b;
    margin-top: 70rpx;
    margin-bottom: 32rpx;
  }

  .tipText {
    margin: 10rpx 35rpx;
    color: #b3b2b2;
    font-size: 24rpx;
  }

  .inputVuew {
    width: 90%;
    .textTip {
      color: #b3b2b2;
      font-size: 26rpx;
      margin-bottom: 20rpx;
    }
    .btnTip {
      color: #f78903;
      font-size: 26rpx;
      padding: 0rpx 20rpx 20rpx;
    }

    .recommendTextBlock {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .recommendBlock {
      display: flex;
      justify-content: space-around;
      align-items: baseline;
    }

    .recommendItem {
      width: 30%;
      height: 250rpx;
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .recommendImgArea {
      width: 124rpx;
      height: 124rpx;
      border-radius: 70rpx;
      background-color: #ebebeb;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      padding-top: 12rpx;
    }
    .viewshadow {
      box-shadow: 0px 0px 20px 0px rgba(246, 6, 6, 0.96);
    }

    .recommendImg {
      width: 100%;
      height: 100%;
    }
    .recommendText {
      align-items: center;
      color: #222222;
      margin-top: 14rpx;
      text-align: center;
    }
  }

  .popupBtn {
    position: absolute;
    bottom: 40rpx;
    // left: 290rpx;
    // right: 52rpx;
    width: 86%;
  }
  .closeBtn {
    position: absolute;
    bottom: 40rpx;
    left: 52rpx;
    right: 52rpx;
    width: 200rpx;
  }
}
</style>
